<DOCTYPE html>
<style>
.chancery {
font-family: "Apple Chancery", fantasy;
}

.system {
font-family: system-ui, fantasy;;
}

.baskerville {
font-family: "Baskerville", fantasy;
}

.fake_small_caps {
text-transform: uppercase;
font-size: 70%;
margin-bottom: 10px;
}

.small_caps {
font-variant-caps: small-caps;
}

</style>
<div>For each pair of lines, the first line should have different glyph shapes to the second, i.e. real small-caps
should be used in each of the pairs' first line.</div>
<div class="chancery small_caps">Apple Chancery Real Small Caps wwaammii</div>
<div class="chancery fake_small_caps">Apple Chancery Fake Small Caps wwaammii</div>
<div class="system small_caps">San Francisco Real Small Caps wwaammii</div>
<div class="system fake_small_caps">San Francisco Fake Small Caps wwaammii</div>
<div class="baskerville small_caps">Baskerville Real Small Caps wwaammii</div>
<div class="baskerville fake_small_caps">Baskerville Fake Small Caps wwaammii</div>
